<template>

    <div  class="title"  @click="toggleOpen">
        <span>{{title}}</span>
        <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
        <i v-if="progress==='0' || progress<1"><el-tag type="danger">待完善</el-tag></i>
        <div class="head-right">
            <span v-if="role===2">
                <el-button type="success" size="mini" @click="submit" v-if="!disabled">保存</el-button>
                <el-button type="primary" size="mini" @click="handleEdit" v-if="disabled">{{ title == '附件' ? '上传' : '编辑' }}</el-button>
                <el-button type="warning" size="mini" @click="handleCancel" v-if="!disabled">取消</el-button>
            </span>


            <span class="toggle">
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

        </div>
    </div>
</template>

<script>
    export default {
        name: "item-header",
        props:['progress','open','disabled','title'],
        computed:{
            role(){
                let role_name =this.$store.state.userInfo.role_name || ''

                let role=0

                //0：管理员，1：专家，2高校
                if (role_name.indexOf("管理员") >-1 || role_name.indexOf("教育部") > -1){
                    role = 0
                }else if (role_name.indexOf("高校")>-1) {
                    role = 2
                }else{
                    role = 1
                }
                return role
            },
        },
        methods:{
            eve(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
            },
            handleEdit(e){
                this.eve(e)
                this.$emit('changeDisabled',false)
            },
            handleCancel(e){
                this.eve(e)
                this.$emit('changeDisabled',true)
            },
            toggleOpen(){
                this.$emit('toggleOpen')
            },
            submit(e){
                this.eve(e)
                this.$emit('submit')
            }
        }
    }
</script>

<style scoped>
    .toggle{
        margin-left:10px;
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
</style>
